<template>
  <DetailsFormBox :title="page.title" :type="route.query.type" isFull :form="data.form" :btns="[
    {
      title: '重置',
      icon: '',
      type: '',
      hidden: !isEdit,
      click: getForm,
    },
    {
      title: '保存',
      icon: '',
      type: 'primary',
      hidden: !isEdit,
      click: (form: any) => {
        saveBtn(form, false)
      },
    },
  ]" :formInfo="[
    {
      label: '创建人员',
      value: 'createPersonName',
    },
    {
      label: '创建时间',
      value: 'createDate',
    },
  ]" :loading="data.loading" :loadingMsg="data.loadingMsg">
    <template #default="{ form }">
      <div class="p-12">
        <OrderInfo :produceTaskBillNo="route.query.produceTaskBillNo" />
        <CellBox title="基本信息" isTop>
          <FlexBox :margin="2">
            <ElFormItemBox label="数据单号" prop="dataBillNo">
              {{ form?.dataBillNo || '系统自动生成' }}
            </ElFormItemBox>
            <ElFormItemBox label="数据数量" prop="tagDataQuantity">
              {{ form?.tagDataQuantity || '--' }}
            </ElFormItemBox>
          </FlexBox>
        </CellBox>
        <CellBox title="数据内容" isTop>
          <FlexBox>
            <ElFormItemBox label="数据来源">
              <ElInputBox :data="form" dataName="dataComeFromName" disabled />
            </ElFormItemBox>
            <ElFormItemBox label="数据状态" prop="dataBillState" isRules>
              <ElSelectBox :data="form" dataName="dataBillState" :options="options.state" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="到达日期" prop="dataArriveDate">
              <ElDayBox :data="form" dataName="dataArriveDate" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="数据颜色" prop="dataColor">
              <ElSelectBox :data="form" dataName="dataColor" :options="options.dataColor" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="数据格式" prop="dataFormat">
              <ElSelectBox :data="form" dataName="dataFormat" :options="options.dataFormat" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="到达数量" prop="arriveDataQuantity">
              <ElNumberBox :data="form" dataName="arriveDataQuantity" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="页面长度" prop="pageLength">
              <ElNumberBox :data="form" dataName="pageLength" unit="mm" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="总页面数" prop="totalPageCount">
              <ElNumberBox :data="form" dataName="totalPageCount" unit="页" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="数据路径" prop="dataPath" class="wAuto">
              <ElInputBox :data="form" dataName="dataPath" :disabled="!isEdit">
                <template #append>
                  <el-button @click="() => {
                    copyBtn(form.dataPath)
                  }">复制路径</el-button>
                </template>
              </ElInputBox>
            </ElFormItemBox>
            <ElFormItemBox label="数据名称" prop="dataName" class="wAuto">
              <ElInputBox :data="form" dataName="dataName" type="textarea" :disabled="!isEdit" />
            </ElFormItemBox>
            <ElFormItemBox label="数据备注" prop="dataRemark" class="wAuto">
              <ElInputBox :data="form" dataName="dataRemark" type="textarea" :disabled="!isEdit" />
            </ElFormItemBox>
          </FlexBox>
        </CellBox>
        <CellBox title="自检流程" isTop>
          <div class="processTag list-b-12">
            <div class="processTag-step list-r-6" v-if="form.inspectProcess.length > 0">
              <div class="processTag-item" v-for="(item, index) in form.inspectProcess">
                <el-icon v-if="index !== 0">
                  <CaretRight />
                </el-icon>
                <dl>
                  <dt>
                    <span>{{ index + 1 }}</span>
                  </dt>
                  <dd>
                    <p>{{ item.inspectProcessName }}</p>
                    <el-icon @click="() => {
                      form.inspectProcess.splice(index, 1)
                    }" v-if="isEdit">
                      <Close />
                    </el-icon>
                  </dd>
                </dl>
              </div>
            </div>
            <div class="text-color-info" v-else>
              暂无流程
            </div>
            <div class="processBox list-r-6" v-if="isEdit">
              <span @click="() => {
                form.inspectProcess.push({
                  inspectProcessCode: item.value,
                  inspectProcessName: item.label,
                })
              }" v-for="item in options.inspectProcess">
                {{ item.label }}
              </span>
            </div>
          </div>
        </CellBox>
      </div>
    </template>
  </DetailsFormBox>
</template>
<script setup lang="ts">
import { sendMsg } from '@/utils/crossTagMag.ts';
import { useListComponent } from '../pageTs'; // 引入逻辑
import page from '../page.ts'; // 引入逻辑
import '../pageCss.scss'; // 引入样式
const { dataInfo, options } = useListComponent();
const { proxy } = getCurrentInstance() as any;
const data: any = reactive({
  loading: false,
  loadingMsg: '',
  mainPage: 1,
  form: {
    saleOrderCode: "", // 销售订单号
    dataArriveDate: "", // 数据到达日期，格式：yyyy-MM-dd
    dataColor: "", // 数据颜色
    dataFormat: "", // 数据格式
    dataName: "", // 数据名称
    dataPath: "", // 数据路径
    inspectProcess: [],
    dataRemark: "", // 数据备注
    dataBillState: null, // 数据生产单状态：1已到达；2制作中；3已完成
    arriveDataQuantity: null, // 数据到达数量
    pageLength: "", // 页面长度
    totalPageCount: "", // 总页面数
    dataProduceBillMxList: []
  },
  productOrder: {},//产品信息
});
const isEdit = ref(true)

import { useRoute } from 'vue-router';
// 获取当前路由对象
const route = useRoute();
const copyBtn = (url: any) => {
  proxy.$com.copyText(url, true)
}
//获取数据
const getForm = () => {
  let _query: any = route.query
  //获取工单信息
  setLoading()
  if (!!!_query.dataBillNo) {
    if (!!_query.produceTaskBillNo) {
      proxy.$api.ProductionBusniess.GetProduceTaskBillDetail({
        produceTaskBillNo: _query.produceTaskBillNo
      })
        .then((res: any) => {
          data.productOrder = res
          data.form.saleOrderCode = res.baseData.saleOrderCode//订单单号
          data.form.saleOrderNo = res.baseData.saleOrderNo//订单单号
          data.form.saleOrderNo = res.baseData.saleOrderNo//订单单号
          data.form.tagDataQuantity = res.baseData.productionQuantity//数据数量
          data.loading = false
        })
        .catch(() => {
        });
    } else {
      data.loading = false
    }
    return
  }
  proxy.$api.ProductionBusniess.GetDataProduceBillDetail({
    dataBillID: _query.dataBillID,
    dataBillNo: _query.dataBillNo,
  })
    .then((res: any) => {
      proxy.$message('获取成功')
      isEdit.value = (['1', '2'].includes(_query.type))
      data.form = res
      data.loading = false
    })
    .catch(() => {
      data.loading = false
    });
};
const saveBtn = (form: any, isConfirm: boolean = false) => {
  if (form.dataBillID) {
    proxy.$api.ProductionBusniess.UpdateDataProduceBill(form)
      .then((res: any) => {
        if (isConfirm) {
          _setState(form)
        } else {
          _sun()
        }
      })
      .catch(() => { });
  } else {
    proxy.$api.ProductionBusniess.CreateDataProduceBill({
      ...form,
    })
      .then((res: any) => {
        form.dataBillID = res
        if (isConfirm) {
          _setState(form)
        } else {
          _sun()
        }
      })
      .catch(() => { });
  }

  function _sun() {
    proxy.$message('保存成功')
    sendMsg('save', true);
    // getForm()
    window.close();
  }
  function _setState(form: any) {
    proxy.$messageBox('是否确定完成该数据,完成后不可编辑!', () => {
      proxy.$api.ProductionBusniess.FinishedDataProduceBill(form)
        .then((res: any) => {
          _sun()
        })
        .catch(() => { });
    });
  }
};
const setLoading = (title: string = '正在获取数据,请稍等...') => {
  if (!data.loading) {
    data.loading = true;
    data.loadingMsg = title;
  }
};
//获取数据颜色
const GetDataProducesDataColorDataList = () => {
  if (options.dataColor.length > 0) return
  proxy.$api.Public.GetDataProducesDataColorDataList()
    .then((res: any) => {
      options.dataColor = res.map((el: any) => ({
        label: el.objectName,
        value: el.objectCode
      }))
    })
    .catch(() => { });
};
//获取数据格式
const GetDataProducesDataFormatDataList = () => {
  if (options.dataFormat.length > 0) return
  proxy.$api.Public.GetDataProducesDataFormatDataList()
    .then((res: any) => {
      options.dataFormat = res.map((el: any) => ({
        label: el.objectName,
        value: el.objectCode
      }))
    })
    .catch(() => { });
};
//获取数据格式
const GetDataProducesInspectProcessDataList = () => {
  if (options.inspectProcess.length > 0) return
  proxy.$api.Public.GetDataProducesInspectProcessDataList()
    .then((res: any) => {
      options.inspectProcess = res.map((el: any) => ({
        label: el.objectName,
        value: el.objectCode
      }))
    })
    .catch(() => { });
};
onMounted(() => {
  getForm();
  GetDataProducesDataColorDataList();
  GetDataProducesDataFormatDataList();
  GetDataProducesInspectProcessDataList();
});
</script>
